<template>
  <div class="application-list">
    <div>
      <Button type="primary" @click="addApp()">新增应用</Button>
    </div>
    <div>
      <Table class="application-content" :columns="columns7" :data="appData">
        <template slot-scope="{ row }" slot="createdDate">
          <span>{{formatDateByStringMatch(row.createdDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="lastModifiedDate">
          <span>{{formatDateByStringMatch(row.lastModifiedDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div class="table-form-action-box">
            <span class="table-blue action-btn" style="margin-right: 10px;" @click="toEdit(row)">编辑</span>
            <span class="table-blue action-btn" style="margin-right: 10px;" @click="viewVersion(row)">查看版本</span>
            <span class="table-red" @click="toDel(row)">删除</span>
          </div>
        </template>
      </Table>
      <Page
        style="margin-bottom: 10px;"
        v-show="pagination.total > pagination.pageSize || pagination.pageSize > 10"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        :total="pagination.total"
        :current="pagination.current"
        :page-size="pagination.pageSize"
        :transfer="true"
        show-sizer
        show-total
      />
    </div>
    <Modal v-model="modalShow" title="应用操作" @on-cancel="cancel" :footer-hide="true">
      <Form ref="appSetting" :rules="ruleValidate" :model="appSetting" label-position="right" :label-width="80">
        <Row>
          <i-col span="18">
            <Row>
              <i-col span="12">
                <FormItem label="英文名称" prop="name">
                  <Row>
                    <i-col span="24">
                      <i-input v-model="appSetting.name" style="width:300px"></i-input>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row>
          <i-col span="18">
            <Row>
              <i-col span="12">
                <FormItem label="中文名称" prop="cnName">
                  <Row>
                    <i-col span="24">
                      <i-input v-model="appSetting.cnName" style="width:300px"></i-input>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row>
          <i-col span="18">
            <Row>
              <i-col span="12">
                <FormItem label="地址" prop="gitUrl">
                  <Row>
                    <i-col span="24">
                      <i-input v-model="appSetting.gitUrl" style="width:300px"></i-input>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row>
          <i-col span="18">
            <Row>
              <i-col span="12">
                <FormItem label="描述">
                  <Row>
                    <i-col span="24">
                      <i-input v-model="appSetting.desc" style="width:300px"></i-input>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row>
          <i-col span="24">
            <Row>
              <i-col span="24">
                <FormItem>
                  <Button type="primary" @click="ascertain('appSetting')">提交</Button>
                  <Button style="margin-left: 8px" @click="cancel()">关闭</Button>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { getList, delApplication, createApp, editApp } from 'http/api/application';
import { formatDateByStringMatch } from 'assets/scripts/common';
export default {
  name: 'ApplicationList',
  data () {
    return {
      appId: '',
      operationTpye: 0,
      modalShow: false,
      appSetting: {
        name: '',
        cnName: '',
        gitUrl: '',
        desc: ''
      },
      pagination: {
        total: 10,
        current: 1,
        pageSize: 10
      },
      ruleValidate: {
        name: [
          { required: true, message: '中文名称不能为空', trigger: 'blur' }
        ],
        cnName: [
          { required: true, message: '英文名称不能为空', trigger: 'blur' }
        ],
        gitUrl: [
          { required: true, message: '地址不能为空', trigger: 'change' }
        ]
      },
      columns7: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '中文名称',
          key: 'cnName'
        },
        {
          title: '英文名称',
          key: 'name'
        },
        {
          title: '创建人',
          key: 'createdBy'
        },
        {
          title: '创建时间',
          key: 'createdDate',
          slot: 'createdDate'
        },
        {
          title: '修改人',
          key: 'lastModifiedBy'
        },
        {
          title: '修改时间',
          key: 'lastModifiedDate',
          slot: 'lastModifiedDate'
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          slot: 'action'
        }
      ],
      appData: [],
      formatDateByStringMatch: formatDateByStringMatch
    };
  },

  methods: {
    viewVersion (row) {
      this.$router.push({ path: '/home/application/appVersion?id=' + row.id + '&name=' + row.cnName });
    },
    addApp () {
      this.modalShow = true;
      this.operationTpye = 0;
      this.appSetting = {
        name: '',
        cnName: '',
        gitUrl: '',
        desc: ''
      }
    },
    cancel () {
      this.modalShow = false;
    },
    ascertain (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.operationTpye === 0) { // 创建
            this.createApp()
          } else { // 编辑
            this.editApp()
          }
        }
      })
    },
    createApp () {
      createApp(this.appSetting)
        .then(res => {
          if (res) {
            this.$Message.success('操作成功');
            this.modalShow = false;
            this.getList();
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    editApp () {
      this.appSetting.id = this.appId;
      editApp(this.appSetting)
        .then(res => {
          if (res) {
            this.$Message.success('操作成功');
            this.modalShow = false;
            this.getList();
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 应用详情
    toEdit (row) {
      console.log(row)
      this.modalShow = true;
      this.operationTpye = 1;
      this.appId = row.id;
      this.appSetting.name = row.name;
      this.appSetting.cnName = row.cnName;
      this.appSetting.gitUrl = row.gitUrl;
      this.appSetting.desc = row.desc;
    },
    // 删除应用
    toDel (row) {
      this.$Modal.confirm({
        title: '确认要删除吗',
        content: '<p>数据删除后不可恢复</p>',
        onOk: async () => {
          await delApplication(row.id);
          this.getList();
        }
      });
    },
    changePageNum (pageNum) {
      this.pagination.current = pageNum;
      this.getList();
    },
    changePageSize (size) {
      this.pagination.pageSize = size;
      this.changePageNum(1);
    },
    getList () {
      let param = {
        page: this.pagination.current,
        size: this.pagination.pageSize
      };
      getList(param).then(res => {
        if (res) {
          this.appData = res.items;
          this.pagination.total = res.total;
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    }
  },
  mounted () {
    this.getList();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.application-list {
  padding: 20px;
  .application-content {
    margin: 20px 0;
  }
}
</style>

<style lang="less">
</style>
